<template>
  <div class="count">
    <h2>Count组件</h2>
    <p>count：{{ count }}</p>
    <p>doubleCount:{{ doubleCount }}</p>
    <p>电影的总长度{{ movieList.length }}</p>
    <button @click="increment">累加</button>
    <button @click="incrementN(3)">累加n</button>
    <button @click="incrementNM(3,4)">累加 多个n</button>
    <button @click="asyncIncrementN(3)">异步累加n</button>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "Count",
});

</script>

<script lang="ts" setup>
// 引入store的hooks函数
import useCountStore from "../../store/count";
import useMovieStore from "../../store/movie";
import {storeToRefs} from "pinia";

// 得到store对象
const countStore = useCountStore()
const movieStore = useMovieStore()

// 解构出值
const {count, double: doubleCount} = storeToRefs(countStore)
const {movieList} = storeToRefs(movieStore)

// 解构出actions 方法
const {increment, incrementN, incrementNM, asyncIncrementN} = countStore
</script>

<style scoped>
.count {
  background-color: pink;
}
</style>